<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Quadcopter</title>
    <link rel="stylesheet" href="quadcopter.css">
  </head>
  <body style="margin: 0 0 0 0;">
    
    
    <div id="text_above_the_grid_id" >
      <h1>Quadcopter</h1>
  
      <p>Text Above the grid, Image Width <span id="image_width" ></span> </p>
    </div>
    
    <!-- Need to put an outer div around this and then a clear pane above  
        'main_copter_grid_id_clipping_container' and "bkg_img_id" and the copters to capture the click events -->
    
    <div id="main_copter_grid_id_clipping_container" style="overflow: hidden; width: 100%; height: 10px; position: relative" >
    
      <img id="bkg_img_id" src="images/SeattleMap.png" style="position:absolute; left: 0px; top: 0px; " />

     </div>
    
    <div id="text_below_the_grid_id" >Text below the grid</div>
    
    
    <!-- Currently, when deploying your Chrome app, you'll need to compile -->
    <!-- the Dart code to Javascript, remove the 'type' attribute below, and -->
    <!-- change the 'src' reference to the .dart.js file. -->
    <script src="quadcopter.dart" type="application/dart"></script>
    
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
    <script src="packages/js/dart_interop.js"></script>
  </body>
</html>
